<app-content-header></app-content-header>

<app-detail-header *ngIf="!loading" [title]="'GENERAL.INFO.POSTRISK_EVENT.BASIC' | i18n" [ifEditable]="false">
</app-detail-header>

<nz-spin [nzSpinning]="loading"></nz-spin>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row [columns]="firstColumns" [height]="'100'"> </app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row [columns]="secondColumns" [height]="'100'"> </app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row [columns]="thirdColumns" [height]="'100'"> </app-info-row>
</div>

<div class="cil__info-item-blocks bottom-columns">
  <app-info-row [columns]="forthColumns" [height]="'100'"> </app-info-row>
</div>

<p class="score">{{ detailData.score }}</p>

<div class="cil-table-block">
  <st
    #st
    [scroll]="ruleSt.scroll"
    [data]="ruleSt.data"
    [columns]="ruleColumns"
    [widthMode]="{ type: 'strict' }"
    [ps]="ruleSt.ps"
    [pi]="ruleSt.pi"
    [page]="ruleSt.stPage"
    [total]="ruleSt.total"
    [loading]="ruleSt.loading"
  >
    <ng-template st-row="ruleType" let-item>
      <span>{{ RuleTypeTextMap[item.ruleType] | i18n }}</span>
    </ng-template>
  </st>
</div>

<div *ngIf="tradeSt.data && tradeSt.data.length" class="rule-trades-block cil-table-block">
  <st
    #st
    [scroll]="tradeSt.scroll"
    [data]="tradeSt.data"
    [columns]="tradeColumns"
    [widthMode]="{ type: 'strict' }"
    [ps]="tradeSt.ps"
    [pi]="tradeSt.pi"
    [page]="tradeSt.stPage"
    [total]="tradeSt.total"
    [loading]="tradeSt.loading"
    (change)="onTradeChange($event)"
  >
  </st>
</div>

<nz-modal
  [(nzVisible)]="modal.isCommentModalVisable"
  [nzTitle]="'GENERAL.INFO.COMMENT' | i18n"
  (nzOnCancel)="handleModalCancel()"
  (nzOnOk)="handleModalRemarkOk()"
  [nzOkLoading]="modal.isModalLoading"
  [nzOkText]="'BTN.SUBMIT' | i18n"
  [nzCancelText]="'BTN.CANCEL' | i18n"
>
  <textarea rows="4" nz-input [(ngModel)]="currentTrade.remark"></textarea>
</nz-modal>

<app-detail-header *ngIf="!loading" [title]="'GENERAL.INFO.OPERATION' | i18n" [ifEditable]="false"> </app-detail-header>

<div class="btn-groups" *ngIf="handleStatus !== 'P'">
  <button nz-button nzType="primary" (click)="handleOperator('R')">{{ 'BTN.RELEASED' | i18n }}</button>
  <button nz-button nzType="primary" (click)="handleOperator('E')">{{ 'BTN.EXAMINED' | i18n }}</button>
</div>
